<template>
  <div class="product-item">
    <van-nav-bar title="商品列表" left-text="返回" left-arrow>
      <!-- <template #right>
        <van-icon name="search" size="18" />
      </template> -->
    </van-nav-bar>
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <van-card
      class="card"
      num="2"
      price="135.00"
      title="加拿大原装进口纽顿nutram number 无谷低升糖系列 T28鲑鱼&鳟鱼配方小型&玩赏犬粮 1.82kg"
      :thumb='require("../../public/商品详情页列表/商品图1.jpg")'
      
    >
      <div slot="bottom" class="p-bottom" style="position:relative;">
        <span>互动:(99%好评)</span>
        <span>售出:3804</span>
        <img :src='require("../../public/商品详情页列表/购物车.png")' class="imggg" alt="">
      </div>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value:"",
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
    };
  },
};
</script>

<style>

.product-item .p-bottom{
  color:#999999 ;
}
.van-card__price span{
  color:#1989fa  ;
}
.product-item .imggg{
  color:#1989fa  ;
  width:20px;
  padding-left: 95px;
  position:absolute;
}
</style>
